<template>
  <div class="chat-sessions">
    <div class="chat-header">
      Portfolio
      <el-button type="primary" size="small" :icon="Plus" class="create-btn" @click="openNewSession">创建</el-button>
    </div>
    <ul class="session-list">
      <li v-for="session in sessions" 
          :key="session.sessionId" 
          @click="selectSession(session)"
          :class="{ 'active': currentSession && currentSession.sessionId === session.sessionId }">
        <el-tooltip :content="session.sessionName" placement="right" :disabled="session.sessionName.length < 15">
          <div class="session-item">
            <i class="el-icon-chat-dot-round"></i>
            <span class="session-name">{{ session.sessionName }}</span>
            <el-button 
              type="danger" 
              size="small" 
              circle
              class="delete-btn"
              :icon="Delete" 
              @click.stop="confirmDelete(session)"
              v-if="currentSession && currentSession.sessionId === session.sessionId"
            ></el-button>
          </div>
        </el-tooltip>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import { Plus, Delete } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { deleteSession } from '../api/rag-api';

// 定义组件接收的属性
const props = defineProps({
  sessions: {
    type: Array,
    default: () => []
  },
  currentSession: {
    type: Object,
    default: () => ({})
  },
  userId: {
    type: String,
    default: ''
  }
});

// 定义组件发出的事件
const emit = defineEmits(['select-session', 'new-session', 'delete-session']);

// 选择会话
const selectSession = (session) => {
  emit('select-session', session);
};

// 创建新会话
const openNewSession = () => {
  emit('new-session');
};

// 确认删除会话
const confirmDelete = (session) => {
  ElMessageBox.confirm(
    `确定要删除会话 "${session.sessionName}" 吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      try {
        // 调用删除会话的 API
        const result = await deleteSession(props.userId, session.sessionId);
        if (result) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          });
          // 通知父组件会话已被删除
          emit('delete-session', session.sessionId);
        } else {
          ElMessage.error('删除失败');
        }
      } catch (error) {
        console.error('删除会话出错:', error);
        ElMessage.error(`删除失败: ${error.message}`);
      }
    })
    .catch(() => {
      // 用户取消删除操作
    });
};
</script>

<style scoped lang="scss">
.chat-sessions {
  width: 25%;
  background-color: #f9f9fb;  // 更淡的背景色
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

  .chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-weight: 600;
    font-size: 16px;
    
    .create-btn {
      border-radius: 20px;
      padding: 6px 15px;
      font-size: 14px;
      transition: all 0.3s;
      
      &:hover {
        transform: scale(1.05);
      }
    }
  }

  .session-list {
    list-style-type: none;
    padding: 0;
    margin: 0;

    li {
      padding: 12px 15px;
      margin-bottom: 8px;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.3s ease;
      background-color: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
      
      .session-item {
        display: flex;
        align-items: center;
        position: relative;
        
        i {
          margin-right: 8px;
          color: #409EFF;
        }
        
        .session-name {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 180px;
          flex-grow: 1;
        }
        
        .delete-btn {
          opacity: 0.8;
          transition: all 0.3s;
          
          &:hover {
            opacity: 1;
            transform: scale(1.1);
          }
        }
      }

      &:hover {
        background-color: #f0f7ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      }
      
      &.active {
        background-color: #ecf5ff;
        border-left: 3px solid #409EFF;
      }
    }
  }
}
</style>